import { Breadcrumb, Button, Icon, Tabs, Rate, Modal, Spin } from 'antd';
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { detailInitAction, getUserAction, addToCartAction } from "../../actionCreators/actions";

import { Nav } from "../../components/Nav";
import { Foot } from "../../components/Footer";

import { Banner } from '../../components/Banner';
import ToolBuy from '../../tools/addToCart';


const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

import './index.less'

class UI extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rate: 4.5
        }

        this.onChange = this.onChange.bind(this);
    }
    componentDidMount() {
        this.props.detailInit();
    }

    onChange(value) {
        this.setState({ rate: value });
    }

    render() {
        let { goods } = this.props;
        let details = goods == null ? (<div className="my-spin">
            <Spin size="large" tip="正在拼命加载中 ... " />
        </div>) : (
                <div className="detail">
                    <Nav {...this.props} />
                    <div className="detail-con w1000 clearfix">
                        <Breadcrumb>
                            <Breadcrumb.Item><Link to="/home">首页</Link></Breadcrumb.Item>
                            <Breadcrumb.Item><Link to="/goods">科幻</Link></Breadcrumb.Item>
                        </Breadcrumb>
                        <div className="content clearfix">
                            <div className="con-img fl">
                                <Banner bannerList={goods.BannerImg} />
                            </div>
                            <div className="con-txt fl">
                                <div className="top">
                                    <h4>{goods.title}</h4>
                                    <p>{goods.info}</p>
                                </div>
                                <div className="bot">
                                    <p>售价<span>¥<i>{goods.price}</i></span></p>
                                    <p>销量<span>{goods.num}件</span></p>
                                    <div className="but">
                                        <Button className="addToCart" onClick={this.props.addToCart(goods)}>加入购物车</Button>
                                        <Button className="buyNow" onClick={this.props.buyNow(goods)}>立即购买</Button>
                                        <s>
                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#f9b404" />
                                            7天无理由替换
                                    </s>
                                        <s>
                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#f9b404" />
                                            先行赔付
                                    </s>
                                        <s>
                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#f9b404" />
                                            超时赔偿
                                    </s>
                                        <s>
                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#f9b404" />
                                            顺丰包邮
                                    </s>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="detail-cards">
                            <Tabs type="card">
                                <TabPane tab="商品信息" key="1">
                                    <img src={goods.detailImg} alt="" />
                                </TabPane>
                                <TabPane tab="评价详情" key="2">
                                    <div className="rate">
                                        <div className="fl">商品满意度：</div>
                                        <Rate allowHalf defaultValue={4.5} onChange={this.onChange} />
                                        <span><s>{this.state.rate}</s>分</span>
                                    </div>
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                    <Foot />
                </div >
            );

        return details;
    }
}

let mapStateToProps = ({ detailReducer }) => detailReducer;

let mapDispatchToProps = (dispatch, props) => {
    return {
        detailInit() {
            let { goodsID } = props.match.params;
            dispatch(detailInitAction(goodsID));
        },
        addToCart(goods) {
            return (() => {
                // 获取登录的用户
                let getUserArr = window.sessionStorage.getItem("user");
                let isLoginFlag = 0;
                if (getUserArr != null) {
                    getUserArr = JSON.parse(getUserArr);
                    getUserArr.map(item => {
                        if (item.status == true) {
                            isLoginFlag = 1;
                            ToolBuy.addToCar(item.name, goods, props);
                            return;
                        }
                    });
                }
                if (!isLoginFlag) {
                    confirm({
                        title: '温馨提示!',
                        content: '您还未登录,是否立即登录 ?',
                        okText: '是',
                        cancelText: '再看看',
                        onOk: () => {
                            window.sessionStorage.setItem('backurl', props.location.pathname);
                            props.history.push('/login');
                        },
                        onCancel() {

                        },
                    });
                }

            }).bind(this);
        },
        buyNow(goods) {
            return (() => {
                this.addToCart(goods)();
                props.history.push('/shoppingcar');
            }).bind(this);
        }
    }
}

export let Detail = connect(mapStateToProps, mapDispatchToProps)(UI);